<template>
  <div>
    <Menu mode="horizontal" :theme="theme1" active-name="1">
      <MenuItem name="1">
        <Icon type="ios-paper" />
        内容管理
      </MenuItem>
      <MenuItem name="2">
        <Icon type="ios-people" />
        用户管理
      </MenuItem>
      <Submenu name="3">
        <template slot="title">
          <Icon type="ios-stats" />
          统计分析
        </template>
        <MenuGroup title="使用">
          <MenuItem name="3-1">新增和启动</MenuItem>
          <MenuItem name="3-2">活跃分析</MenuItem>
          <MenuItem name="3-3">时段分析</MenuItem>
        </MenuGroup>
        <MenuGroup title="留存">
          <MenuItem name="3-4">用户留存</MenuItem>
          <MenuItem name="3-5">流失用户</MenuItem>
        </MenuGroup>
      </Submenu>
      <MenuItem name="4">
        <Icon type="ios-construct" />
        综合设置
      </MenuItem>
    </Menu>
    <br>
    <p>Change theme</p>
    <RadioGroup v-model="theme1">
      <Radio label="light"></Radio>
      <Radio label="dark"></Radio>
      <Radio label="primary"></Radio>
    </RadioGroup>

    <br/><br/>
    <Menu :theme="theme1" active-name="1-2" :open-names="['1']">
      <Submenu name="1">
        <template slot="title">
          <Icon type="ios-paper" />
          内容管理
        </template>
        <MenuItem name="1-1">文章管理</MenuItem>
        <MenuItem name="1-2">评论管理</MenuItem>
        <MenuItem name="1-3">举报管理</MenuItem>
      </Submenu>
      <Submenu name="2">
        <template slot="title">
          <Icon type="ios-people" />
          用户管理
        </template>
        <MenuItem name="2-1">新增用户</MenuItem>
        <MenuItem name="2-2">活跃用户</MenuItem>
      </Submenu>
      <Submenu name="3">
        <template slot="title">
          <Icon type="ios-stats" />
          统计分析
        </template>
        <MenuGroup title="使用">
          <MenuItem name="3-1">新增和启动</MenuItem>
          <MenuItem name="3-2">活跃分析</MenuItem>
          <MenuItem name="3-3">时段分析</MenuItem>
        </MenuGroup>
        <MenuGroup title="留存">
          <MenuItem name="3-4">用户留存</MenuItem>
          <MenuItem name="3-5">流失用户</MenuItem>
        </MenuGroup>
      </Submenu>
    </Menu>
    <br/>
    <br/>
    <Tabs value="name1">
      <TabPane label="标签一" name="name1">标签一的内容</TabPane>
      <TabPane label="标签二" name="name2" disabled>标签二的内容</TabPane>
      <TabPane label="标签三" name="name3">标签三的内容</TabPane>
    </Tabs>
    <br/>
    <Tabs type="card" closable>
      <TabPane label="标签一">标签一的内容</TabPane>
      <TabPane label="标签二">标签二的内容</TabPane>
      <TabPane label="标签三">标签三的内容</TabPane>
      <Button size="small" slot="extra">增加</Button>
    </Tabs>
    <br/>
    <br/>
    <Dropdown>
      <a href="javascript:void(0)">
        下拉菜单
        <Icon type="ios-arrow-down"></Icon>
      </a>
      <DropdownMenu slot="list">
        <DropdownItem>驴打滚</DropdownItem>
        <DropdownItem>炸酱面</DropdownItem>
        <DropdownItem disabled>豆汁儿</DropdownItem>
        <DropdownItem>冰糖葫芦</DropdownItem>
        <DropdownItem divided>北京烤鸭</DropdownItem>
      </DropdownMenu>
    </Dropdown>
    <Dropdown trigger="click" style="margin-left: 20px">
      <Button type="primary">
        下拉菜单
        <Icon type="ios-arrow-down"></Icon>
      </Button>
      <DropdownMenu slot="list">
        <DropdownItem>驴打滚</DropdownItem>
        <DropdownItem>炸酱面</DropdownItem>
        <DropdownItem disabled>豆汁儿</DropdownItem>
        <DropdownItem>冰糖葫芦</DropdownItem>
        <DropdownItem divided>北京烤鸭</DropdownItem>
      </DropdownMenu>
    </Dropdown>
    <br/>
    <Dropdown>
      <a href="javascript:void(0)">
        北京小吃
        <Icon type="ios-arrow-down"></Icon>
      </a>
      <DropdownMenu slot="list">
        <DropdownItem>驴打滚</DropdownItem>
        <DropdownItem>炸酱面</DropdownItem>
        <DropdownItem>豆汁儿</DropdownItem>
        <Dropdown placement="right-start">
          <DropdownItem>
            北京烤鸭
            <Icon type="ios-arrow-forward"></Icon>
          </DropdownItem>
          <DropdownMenu slot="list">
            <DropdownItem>挂炉烤鸭</DropdownItem>
            <DropdownItem>焖炉烤鸭</DropdownItem>
          </DropdownMenu>
        </Dropdown>
        <DropdownItem>冰糖葫芦</DropdownItem>
      </DropdownMenu>
    </Dropdown>
    <br/>
    <br/>
    <Breadcrumb>
      <BreadcrumbItem to="/">
        <Icon type="ios-home-outline"></Icon> Home
      </BreadcrumbItem>
      <BreadcrumbItem to="/components/breadcrumb">
        <Icon type="logo-buffer"></Icon> Components
      </BreadcrumbItem>
      <BreadcrumbItem>
        <Icon type="ios-cafe"></Icon> Breadcrumb
      </BreadcrumbItem>
    </Breadcrumb>
    <br/>
    <br/>
    <Anchor show-ink>
      <AnchorLink href="#basic_usage" title="Basic Usage" />
      <AnchorLink href="#static_position" title="Static Position" />
      <AnchorLink href="#API" title="API">
        <AnchorLink href="#Anchor_props" title="Anchor props" />
        <AnchorLink href="#Anchor_events" title="Anchor events" />
        <AnchorLink href="#AnchorLink_props" title="AnchorLink props" />
      </AnchorLink>
    </Anchor>
    <br/>
    <br/>
    <Steps :current="1">
      <Step title="已完成" content="这里是该步骤的描述信息"></Step>
      <Step title="进行中" content="这里是该步骤的描述信息"></Step>
      <Step title="待进行" content="这里是该步骤的描述信息"></Step>
      <Step title="待进行" content="这里是该步骤的描述信息"></Step>
    </Steps>
    <br/>
    <Steps :current="1">
      <Step title="注册" icon="ios-person"></Step>
      <Step title="上传头像" icon="ios-camera"></Step>
      <Step title="验证邮箱" icon="ios-mail"></Step>
    </Steps>
    <br/>
    <Steps :current="2" direction="vertical">
      <Step title="已完成" content="这里是该步骤的描述信息"></Step>
      <Step title="已完成" content="这里是该步骤的描述信息"></Step>
      <Step title="进行中" content="这里是该步骤的描述信息"></Step>
      <Step title="待进行" content="这里是该步骤的描述信息"></Step>
    </Steps>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
  </div>
</template>

<script>
  export default {
    name: "iview_nav",
    props: {
      
    },
    data() {
      return {
        theme1: 'light'
      }
    },
    mounted() {
    
    },
    methods: {
      
    },
    computed: {
      
    },
    watch: {
      
    }
  }
</script>

<style scoped>

</style>